<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="sites/common/head"></head>
<style>
   .j-video {
        width: 215px;
        height: 140px;
        background-color: #000;
        position: absolute;
        left: 20%;
        top: 349px;
        margin-left: -170px;
        background-size: 100%;
    }
</style>

<body>
<!--导航-->
<th:block th:replace="sites/common/nav"></th:block>
<!--轮播-->
<div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="/img/homePageTitle.jpg" width="100%" height="auto"/></div>
        <div class="topTitle">
        <div style="text-align: center;height:10%;margin-top:10%">
        <span style="font-size: 1.8rem;color:#000">全国最大最专业的游戏娱乐门户</span>
        </div>
        <div style="text-align: center;height:5%">
        <span style="font-size: 2.4rem;color:#000">欢迎访问娱论君论坛</span>
        </div>
        <form action="/sites/homePage" method="get" id="searchForm" style="margin-top:10%;width:80%;margin-left:10%">
        <input type="hidden" id="nowpage" name="nowpage" value="1">
        <div class="input-group"  style="width: 80%;float: left;">
        <input type="text" name="keyword" class="form-control input-md pull-right" placeholder="九阴真经">
        </div>
        <div class="input-group-btn" style=" background-color: red;width: 20%;float: left;">
        <button class="btn btn-md " type="submit" style="background: red;">
        <span style="color: #fff;">搜      索</span>
        </button>
        </div>
        </form>
        </div>
        <div id="j-video" class="j-video" style="cursor:pointer">
            <video src="//9yin.woniu.com/static/web201588/video/201906_s.mp4" width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted"></video>
            <style>@keyframes foobar{0% {transform:rotate(360deg)}100%{transform:rotate(0deg)}}</style>
            <div class="circle" style="position:absolute;left:50%;margin-left:-45.5px;top:50%;
						margin-top:-45.5px;width:91px;height:91px;animation:foobar 1s linear infinite;background-image:url(//9yin.woniu.com/static/web201588/images/rotate1.png)"></div>
            <div class="arrow" style="position:absolute;left:50%;margin-left:-45.5px;top:50%;
						margin-top:-45.5px;width:91px;height:91px;background-image:url(//9yin.woniu.com/static/web201588/images/rotate2.png)"></div>
        </div>
        <div class="j-container" style="position: fixed; display:none;overflow: hidden; margin-left: -360px; margin-top: -200px; width: 720px; height: 400px; background: rgb(0, 0, 0); z-index: 99; top: 50% !important; left: 50% !important;">
            <div id="9yin_video" class="" style="position: relative; height: 400px; width: 720px; padding: 0px; background-color: rgb(0, 0, 0); z-index: 0;"><div id="9yin_video_video_wrapper" style="overflow: hidden; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;"><video id="9yin_video_video" x-webkit-airplay="allow" style="width: 720px; height: 400px; top: 0px; left: 0px; z-index: 1; margin: auto; display: block; opacity: 1; position: absolute; transform: scale(1.02, 1) translate(0px, 0px);" src="http://9yin.woniu.com/static/web201588/video/201908.mp4" controls="controls"></video></div><div id="9yin_video_displayarea" style="top: 0px; bottom: 0px; left: 0px; right: 0px; width: 720px; height: 400px; position: absolute; display: none;"><div id="9yin_video_jwplayer_dock" style="opacity: 1; position: absolute; z-index: 6; display: none;"></div><img id="9yin_video_jwplayer_logo" src="http://l.longtailvideo.com/html5/5/9/logo.png" style="display: block; position: absolute; z-index: 5; text-decoration: none; cursor: pointer; bottom: 8px; left: 8px; opacity: 0;"><div id="9yin_video_jwplayer_display" style="cursor: pointer; top: 0px; left: 0px; overflow: hidden; position: absolute; z-index: 4; width: 720px; height: 400px;"><div id="9yin_video_jwplayer_display_text" style="z-index: 4; position: relative; opacity: 0.8; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); text-align: center; font-family: Arial, sans-serif; padding: 0px 5px; font-size: 14px; width: 710px; top: 200px;"></div><img id="9yin_video_jwplayer_display_image" style="display: none; position: absolute; cursor: pointer; left: 0px; top: 0px; margin: 0px; padding: 0px; text-decoration: none; z-index: 1;"><div id="9yin_video_jwplayer_display_iconBackground" style="cursor: pointer; position: absolute; border: 0px; background-image: url(&quot;&quot;); width: 50px; height: 50px; margin: 0px; padding: 0px; z-index: 2; display: none; top: 175px; left: 335px;"><div id="9yin_video_jwplayer_display_icon" style="cursor: pointer; position: absolute; top: 0px; left: 0px; border: 0px; margin: 0px; padding: 0px; z-index: 3; display: none; background-image: url(&quot;&quot;); width: 50px; height: 50px; transform: rotate(0deg);"></div></div></div></div><div id="9yin_video_instreamarea" style="overflow: hidden; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 100; background: 0px center; display: none; width: 720px; height: 400px;"></div></div>
        </div>
        <div class="close" style="position: fixed; left: 50%; top: 50%; margin-left: 365px; margin-top: -200px; width: 50px; height: 50px; background: url(&quot;/images/cha.png&quot;) no-repeat; right: -50px; cursor: pointer; z-index: 99;display:none"></div>
    </div>
</div>

<section class="container">

    <div style="width: 100%">
        <h3 class="blockTtl en">热门游戏推荐</h3>
        <!--<div class="contest">-->
            <!--<div class="contestcont">-->
                <!--<div class="ctn">-->
                    <!--<div class="contctn">-->
                        <ul style="width:100%;">
                            <li th:each="m : ${sitesDto.page.allentities}" style="height:200px;" class="col-sm-6 col-xs-11 container">
                                <div style="border: 1px solid #e3e1d7;padding:2%;height: 190px">
                                <div style="width: 30%;height:100%;position:relative;float:left;top:20%;line-height:90px">
                                       <img style="height: auto;width: 70%;left:0%;border-radius:50%;"  th:src="${m.imgUrl}" th:if="${m.imgUrl} ne ''">
                                       <img style="height: auto;width: 70%;left:0%;border-radius:50%;" src="/img/game.png" th:if="${m.imgUrl} eq ''">
                                </div>
<!--                                    background:url('/img/game.png');filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.60;-->
                                <div style="width: 70%;height:100%;float:left;">
                                    <p style="color: #333;font-size: 14px;margin-top: 1%;width: 100%;margin-bottom: 0.5%;font-weight:bold" th:text="${m.gameName}"></p>
                                    <div style="width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 4;-webkit-box-orient: vertical;" th:text="${m.gameInfo}"></div>
                                    <p style="color: red;width: 100%;" th:text="'运营商:'+${m.gameOperators}"></p>
                                    <div style="position:absolute;width:100%;height:auto;right:0%;bottom:10%">
                                        <a th:href="@{'/sites/forwardGameDetail/list?gameId='+${m.id}}" th:if="${session.current_user ne null}" type="button" class="btn btn-success pull-right" style="margin-left: 2%;margin-right:6%;background-color:#A696A3;">玩法指导</a>
                                        <a th:if="${session.current_user eq null}" th:onclick="'wfzd('+${m.id}+')'" class="btn btn-success pull-right" style="margin-left: 2%;margin-right:6%;background-color:#A696A3;">玩法指导</a>
                                        <a href="#" type="button" class="btn btn-primary pull-right"  style="margin-left: 2%;margin-right:6%;background-color:#190307; ">进入论坛</a>
                                    </div>
                                </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <div style="width: 100%;padding-top:5%;float:left">
        <th:block th:replace="common/page"></th:block>
    </div>
    <script type="text/javascript">
        function jumpPage(pageno) {
            if(pageno<1) {
                alert('请输入正整数');
            } else {
                $('#nowpage').val(pageno);
                $('#searchForm').submit();
            }
        }
    </script>
</section>

<!--&lt;!&ndash;底部&ndash;&gt;-->
<th:block th:replace="sites/common/footer"></th:block>
<script src="//static.woniu.com/script/jwplayer/jwplayer.js"></script>

</body>

</html>

<script>
    function wiper() {
        var sum;
        if($(window).width() >= 420){sum = 3;}else{sum=1;}
        var swiper1 = new Swiper('.swiper-container1', {
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 60,
            centeredSlides: true,
            autoplay: 2000,
            autoplayDisableOnInteraction: false
        });
        var swiper2 = new Swiper('.swiper-container2', {
            slidesPerView: sum,
            paginationClickable: true,
            spaceBetween: 10,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        });
    }

    $(function () {
        wiper();
    });

    $(window).resize(function () {
        wiper();
    });

    function wfzd(id) {
        var confirm = window.confirm("进入需要登陆，是否去登陆？");
        if(confirm){
            window.location.href = '/sites/forwardGameDetail/list?id='+id;
        }
    }


    // 播放视频
    var myPlayer = jwplayer("9yin_video").setup({
        file: "http://9yin.woniu.com/static/web201588/video/201908.mp4",
        width: 720,
        height:400,
        //autostart:true
    });
    $(".j-video").on("click",function(){
        $(".mask").show();
        $("body .close").show();
        $(".j-container").show();
        $(".j-container").css({width:'720px',height:'400px'});
        myPlayer.play();
    })
    $(".mask,.close").on("click",function(){
        myPlayer.pause();
        $(".j-container").css({width:0,height:0});
        $(".mask").hide();
        $(".close").hide();
    })

</script>

